<template>
  <div class="table">
    <p>表格一</p>
    <el-table
      :data="data_list"
      border>
      <el-table-column
        v-for="(date, key) in header"
        :key="key"
        :label="date">
        <template slot-scope="scope">
          {{ data_list[scope.$index][key] }}
        </template>
      </el-table-column>
    </el-table>

    <p>表格二</p>
    <el-table
      :data="rightsDate"
      border
      stripe>
      <!-- 设置表头数据源，并循环渲染出来，property对应列内容的字段名，详情见下面的数据源格式 -->
      <el-table-column
        v-for="info in rightHeader"
        :key="info.key"
        :property="info.key"
        :label="info.label">
        <template slot-scope="scope">
          {{ scope.row[scope.column.property] }}  <!-- 渲染对应表格里面的内容 -->
        </template>
      </el-table-column>
      <el-table-column label="启用状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.ifUse" />
        </template>
      </el-table-column>
    </el-table>

    <p>表格三</p>
    <router-table
      :table-data="tableData"
      :table-label="tableLabel" />
  </div>
</template>

<script>
import RouterTable from '@/components/RouterTable'
export default {
  name: 'Table',
  components: {
    RouterTable
  },
  data() {
    return {
      // 模拟数据源展示：
      rightHeader: [
        {
          label: '编码',
          key: 'code'
        },
        {
          label: '姓名',
          key: 'name'
        },
        {
          label: '权限描述',
          key: 'description'
        }
      ],
      rightsDate: [
        {
          'id': 221,
          'code': '01',
          'name': '西药开立权限',
          'description': '医生对西药处方权限',
          'ifUse': '0'
        }, {
          'id': 222,
          'code': '02',
          'name': '草药开立权限',
          'description': '医生对草药处方权限',
          'ifUse': '1'
        }, {
          'id': 223,
          'code': '03',
          'name': '成药开立权限',
          'description': '医生对成药处方权限',
          'ifUse': '0'
        }, {
          'id': 224,
          'code': '04',
          'name': '麻醉开立权限',
          'description': '医生对麻醉处方权限',
          'ifUse': '0'
        },
        {
          'id': 225,
          'code': '05',
          'name': '精一开立权限',
          'description': '医生对精一处方权限',
          'ifUse': '1'
        }
      ],
      tableLabel: [
        { label: '', width: '40', prop: 'id' },
        { label: '农户名称', width: '', prop: 'name', isOpera: true },
        { label: '所属中心店', width: '', prop: 'shop', isOpera: true },
        { label: '性别', width: '', prop: 'sex' },
        { label: '电话', width: '', prop: 'phone' },
        { label: '所在地区', width: '', prop: 'area' },
        { label: '土地面积(亩)', width: '', prop: 'acreage' },
        { label: '累计购买数量(T)', width: '', prop: 'quantity' },
        { label: '累计购买金额(元)', width: '', prop: 'money' },
        { label: '是否管理端添加', width: '', prop: 'add' }
      ],
      tableData: [
        {
          id: 1,
          name: '中国男',
          shop: '阳光超市',
          sex: '男',
          phone: 18383929383,
          area: '华北',
          acreage: 90,
          quantity: 444,
          money: 34534,
          add: '是'
        },
        {
          id: 2,
          name: 'ADS',
          shop: 'sd',
          sex: 's',
          phone: 18383929383,
          area: '华北',
          acreage: 90,
          quantity: 444,
          money: 34534,
          add: '是'
        }
      ],
      header: ['A', 'B', 'C'],
      data_list: [
        [1, 2, 3],
        [4, 5, 6]
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.table{
  p{
    text-align: center;
    color: #222;
    margin: 40px 0 10px;
  }
}
</style>
